<template>
  <div>
    <div style="padding-bottom: 20px; color: #0000FF;" @click="closePage"><用户管理</div>
    <div class="information_edit">
      <div class="page_top padding_20">用户详情</div>
      <div class="page_content padding_20">
        <div class="content_title"><span>基本信息</span></div>

        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>用户ID</span></div>
          <div class="gray_item">
            {{ userinfo.userid }}
          </div>
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>用户名</span></div>
          <el-input v-model="userinfo.username" placeholder="kamisoul" />
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>联系方式</span></div>
          <div class="phone_num">
            <div class="left"><span>+86</span></div>
            <el-input v-model="userinfo.phone" placeholder="联系方式" />
          </div>

        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>微信昵称</span></div>
          <div class="gray_item">
            {{ userinfo.nickname }}
          </div>
        </div>

        <div class="page_content_tit">
          <span>用户头像</span>
          <span style="font-size: 14px;color: #ccc;">720X720PX的图像最佳，大小请不要超过3M</span>
        </div>
        <div style="display: flex;">
          <el-upload
            class="avatar-uploader"
            accept="image/png,image/jpeg,image/gif"
            action="#"
            :show-file-list="false"
            :on-change="beforeAvatarUpload"
            :auto-upload="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>

        </div>

        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>用户状态</span></div>
          <div class="btn_change">
            <div class="gray_item left">
              {{
                userinfo.status==0?'未审核':
                userinfo.status==1?'审核通过':
                userinfo.status==2?'审核未通过':
                userinfo.status==3?'待审核':
                userinfo.status==4?'已封禁':'其他'
              }}
            </div>
            <div class="right">
              <div class="my_button" @click="dialogCheckVisible = true"><span>审核</span></div>
              <div class="my_button" @click="dialogSealVisible = true"><span>封禁</span></div>
            </div>
          </div>
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>账户余额</span></div>
          <div class="btn_change">
            <div class="gray_item left">
              {{ userinfo.integral }}
            </div>
            <div class="right">
              <div class="my_button" @click="showListDialog"><span>账户明细</span></div>
              <div class="my_button" @click="dialogFormVisible = true"><span>修改</span></div>
            </div>
          </div>
        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>收件地址</span></div>
          <el-table
            stripe
            :data="address"
            tooltip-effect="dark"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="收件人"
            />
            <el-table-column
              prop="mobile"
              label="联系方式"
            />
            <el-table-column
              prop="province"
              label="省"
              show-overflow-tooltip
            />
            <el-table-column
              prop="city"
              label="市"
              show-overflow-tooltip
            />
            <el-table-column
              prop="street"
              label="区"
              show-overflow-tooltip
            />
            <el-table-column
              prop="street"
              label="街道"
              show-overflow-tooltip
            />
            <el-table-column
              prop="address"
              label="地址"
              show-overflow-tooltip
            />
          </el-table>
        </div>

      </div>

      <div class="page_foot padding_20">
        <div>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="closePage">取 消</el-button>
          <el-button type="primary" @click="saveuserinfo">保 存</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="修改余额" :visible.sync="dialogFormVisible" @closed="handleCloseDialog(3)">
      <div>
        <div style="margin-bottom: 10px;">
          <div class="ad_item" style="align-items: center;"><span>当前账户余额</span></div>
          <div class="gray_item">
            {{ userinfo.integral }}
          </div>
        </div>
        <div>
          <div class="ad_item" style="align-items: center;"><span>修改余额为</span></div>
          <el-input v-model="new_integral" placeholder="请输入金额" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveIntegral">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="账户余额明细" :visible.sync="dialogListVisible">
      <div>
        <el-table
          stripe
          :data="integral_list"
          tooltip-effect="dark"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="addtime"
            label="时间"
          />
          <el-table-column
            prop="dintegral"
            label="变更值"
          />
          <el-table-column
            prop="now_integral"
            label="余额结果"
            show-overflow-tooltip
          />
          <el-table-column
            prop="realname"
            label="操作人"
            show-overflow-tooltip
          />
        </el-table>
        <div style="display: flex;align-items: center;justify-content: center;padding-top: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="5"
            :page-count="total"
            :total="count"
            @current-change="getData"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogListVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogListVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审核用户" :visible.sync="dialogCheckVisible" @closed="handleCloseDialog(1)">
      <div>
        <el-radio-group v-model="status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">未通过</el-radio>
        </el-radio-group>
        <transition name="el-fade-in-linear">
          <div v-if="status == 2" style="margin-top: 10px;border: 1px solid #F1F1F1;padding: 10px;">
            <div style="margin-bottom: 10px;">理由</div>
            <el-checkbox-group v-model="examinereason">
              <el-checkbox label="1">用户名违规</el-checkbox>
              <el-checkbox label="2">头像违规</el-checkbox>
            </el-checkbox-group>
          </div>
        </transition>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkStatus">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="封禁用户" :visible.sync="dialogSealVisible" @closed="handleCloseDialog(2)">
      <div>
        <div style="margin-bottom: 10px;">封禁时长</div>
        <el-radio-group v-model="sealday">
          <el-radio :label="1">永久</el-radio>
          <el-radio :label="2">10天</el-radio>
          <el-radio :label="3">30天</el-radio>
          <el-radio :label="4">365天</el-radio>
        </el-radio-group>
        <div style="margin: 10px 0;">封禁理由</div>
        <el-checkbox-group v-model="sealreason">
          <el-checkbox label="1">用户名违规</el-checkbox>
          <el-checkbox label="2">头像违规</el-checkbox>
          <el-checkbox label="3">行为违规（发布广告&不文明用语）</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSealVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkSeal">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  userDetails, userIntegralUpdate, usersIntegralList, usersExamine, usersSeal, usersEdit
} from '@/api/users'
export default {
  props: ['editdata'],
  data() {
    return {
      dialogFormVisible: false,
      dialogListVisible: false,
      dialogCheckVisible: false,
      dialogSealVisible: false,
      imageUrl: '',
      imgFile: '',

      address: [],
      userinfo: '',
      new_integral: '',
      integral_list: [],

      status: '',
      examinereason: [],

      sealday: '',
      sealreason: [],

      total: 1,
      count: 1
    }
  },
  created() {
    console.log(this.editdata)
    if (this.editdata) {
      this.usersid = this.editdata.usersid
      this.userDetails()
    } else {

    }
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },

    closePage() {
      this.$parent.closeEditpage()
      // this.$parent.getData(1);
    },
    userDetails() {
      userDetails({ usersid: this.usersid }).then(res => {
        this.userinfo = res.detail.userinfo
        this.address = res.detail.address
        this.imageUrl = res.detail.userinfo.headimgurl
      })
    },
    saveIntegral() {
      userIntegralUpdate({ usersid: this.usersid, integral: this.new_integral }).then(res => {
        if (res.detail.status == 1) {
          this.userinfo.integral = this.new_integral
          this.dialogFormVisible = false
        }
      })
    },
    showListDialog() {
      this.dialogListVisible = true
      this.getData(1)
    },
    usersIntegralList(e) {
      usersIntegralList({ usersid: this.usersid, page: e }).then(res => {
        this.integral_list = res.list.list
        this.total = Number(res.list.total)
        this.count = Number(res.list.count)
      })
    },
    getData(e) {
      this.usersIntegralList(e)
    },
    checkStatus() {
      const examinereason = this.examinereason.toString()
      usersExamine({ usersid: this.usersid, status: this.status, examinereason: examinereason }).then(res => {
        this.dialogCheckVisible = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    checkSeal() {
      const sealreason = this.sealreason.toString()
      usersSeal({ usersid: this.usersid, sealday: this.sealday, sealreason: sealreason }).then(res => {
        this.dialogSealVisible = false
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    saveuserinfo() {
      usersEdit({
        usersid: this.usersid, frames: 1,
        username: this.userinfo.username,
        phone: this.userinfo.phone,
        files: this.imgFile
      }).then(res => {
        this.closePage()
      })
    },
    // 关闭弹窗时数据表单初始化
    handleCloseDialog(type) {
      // 审核
      if(type === 1) {
        this.status = ''
        this.examinereason = []
      } else if (type === 2) { // 封禁
        this.sealday = ''
        this.sealreason = []
      } else if (type === 3) { // 增加余额
        this.new_integral = ''
      }
    }
  }
}
</script>
<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
<style lang="less" scoped>
.padding_20{
	padding: 20px;
}
.must_icon{
	color: #fff;
	background: #FF4D51;
	padding: 4px;
	font-size: 12px;
}

.information_edit{
	border: 1px solid #ccc;
	background: #fff;
}

.page_top{
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}
.gray_item{
		height: 40px;background: #F1F1F1;
		color: #999;line-height: 40px;
		text-indent: 15px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
	}
.page_content{
	border-bottom: 1px solid #ccc;

	.phone_num{
		display: flex;
		.left{
			width: 50px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border: 1px solid #DCDFE6;
			border-radius: 4px;
			color: #999;
			margin-right: 10px;
		}
	}
	.btn_change{
		display: flex;
		.left{
			flex:1;
		}
		.right{
			width: 200px;
			margin-left: 10px;
			display: flex;
			.my_button{
				height: 40px;
				border: 1px solid #1482F0;
				color: #1482F0;
				flex: 1;
				border-radius: 4px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				margin-left: 10px;
			}
		}
	}

}
.content_title{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 10px;
}
.page_content_tit{
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}
.page_foot{
	display: flex;
	justify-content: flex-end;
}
.ad_item{
	display: flex;
	margin-bottom: 10px;
}

</style>
